<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部新闻</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <link rel="stylesheet" href="/static/css/animate.compat.css">

    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="/static/css/me.css">
   
</head>
<body>
    <!-- 导航 -->
    <nav th:replace="_fragments :: menu(3)" class="ui secondary attached m-opacity-mid segment m-mini m-shadow animated fadeInUp">
        <div class=" ui container">
            <div class="ui secondary stackable menu">
                <h1 class="ui violet header item">GDPU NEWS</h1>
                    <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="folder icon"></i> 分类</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="window close outline icon"></i> 归档</a>
                    <a href="#" class="m-item item m-mobile-hide"> <i class="tags icon"></i>标签</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="question circle outline icon"></i> 关于 GDPU NEWS</a>

                    <div class="right item m-mobile-hide">
                        <div class="ui icon transparent input">
                            <input type="text" placeholder="Search...">
                            <i class="search link icon"></i>
                        </div>
                    </div>
            </div>

            <a href="" class="ui menu toggle blue icon button m-right-top m-mobile-show">
                <i class="sidebar icon">

                </i>
            </a>

        </div>


    </nav>
    <!-- 中间内容 -->
    <main class="m-large m-container-small animated fadeInUp">
       <div class="ui container">
          <!-- header -->
          <div class="ui padded top attached segment">
            <div class="ui middle aligned two column stackable grid">
                <div class="column">
                    <h2 class="ui blue header">全部新闻</h3>
                </div>
                <div class="right aligned column ">
                    共 <h2 class="ui red header m-inline-block" th:text="${newscount}"> 9</h2>个
                </div>
            </div>
        </div>

            <th:block th:each="item : ${holemap}">
        <h2 class="ui center aligned header" th:text="${item.key}">2018</h2>
        <div class="ui fluid vertical menu">
            <a href="" target="_blank" class="item"  th:href="@{/news/{id}(id=${news.id})}" th:each="news : ${item.value}">
                <span>
                    <i class="tags purple icon "></i>
                    <span th:text="${news.title}" > 啊手动阀手动阀</span>
                    <div class="ui blue basic left pointing label m-mini" th:text="${#dates.format(news.updateTime,'MM-dd')}">
                        9月13日
                    </div>
                   
                </span>
                <div class="ui red basic label m-mini" th:text="${news.flag}">
                   原创
                </div>
            </a>
            
            
        </div>
           </th:block>

           <!--/*-->
        <h2 class="ui center aligned header">2019</h2>
        <div class="ui fluid vertical menu">
            <a href="" target="_blank" class="item">
                <span>
                    <i class="tags purple icon "></i>
                    啊手动阀手动阀
                    <div class="ui blue basic left pointing label m-mini">
                        9月13日
                    </div>
                   
                </span>
                <div class="ui red basic label m-mini">
                   原创
                </div>
            </a>
            <a href="" target="_blank" class="item">
                <span>
                    <i class="tags purple icon "></i>
                    啊手动阀手动阀
                    <div class="ui blue basic left pointing label m-mini">
                        9月13日
                    </div>
                   
                </span>
                <div class="ui red basic label m-mini">
                   原创
                </div>
            </a>
            <a href="" target="_blank" class="item">
                <span>
                    <i class="tags purple icon "></i>
                    啊手动阀手动阀
                    <div class="ui blue basic left pointing label m-mini">
                        9月13日
                    </div>
                   
                </span>
                <div class="ui red basic label m-mini">
                   原创
                </div>
            </a>
            
            
            
        </div>
           <!--*/-->


       </div>
       



    </main>
    
    

    <!-- 底部 -->
    <footer th:replace="_fragments :: footer" class="ui secondary m-opacity-mid vertical segment m-massive m-shadow">



    </footer>

    <!--/*/<th:block th:replace="_fragments :: script">/*/-->

    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <!--/*/</th:block>/*/-->


    <script>
        $('.menu.toggle').click(function(){
            $('.m-item').toggleClass('m-mobile-hide');

        });
   
    </script>
   

</body>
</html>